<template>
  <div class="content">
    <div class="header">
      <!-- <el-row type="flex">
        <el-row type="flex">
          <el-input v-model="queryList.name" clearable size="small" placeholder="输入内容创作者名称" />
          <el-button class="searchBtn" size="small" type="primary" icon="el-icon-search" @click="getList()">搜索</el-button>
          <el-button
            class="searchBtn"
            size="small"
            type="success"
            icon="el-icon-s-check"
            @click="$router.push('/video/video/videoList')"
          >视频审核</el-button>
          <el-button
            class="searchBtn"
            size="small"
            type="info"
            icon="el-icon-s-custom"
            @click="$router.push('/video/video/videoBlackList')"
          >黑名单</el-button>
        </el-row>
      </el-row> -->
    </div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :element-loading-text="g.loadingStr"
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column label="内容创作者" align="center">
        <template slot-scope="{row}">
          <span>{{ row.businessName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作品数" align="center">
        <template slot-scope="{row}">
          <span>{{ row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="small" type="primary" @click="toWorks(row)">作品</el-button>
          <el-button size="small" type="info" @click="handleBlackAdd(row)">黑名单</el-button>
          <!-- <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryList.currentPage"
      :limit.sync="queryList.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  pageWorksCountList,
  worksBlacklistAdd,
  customerDeleteById
} from '@/api/video'
import Pagination from '@/components/Pagination'
export default {
  name: 'ContentList',
  components: { Pagination },
  data() {
    return {
      queryList: {
        name: '',
        businessId: '',
        currentPage: 1,
        pageSize: 10
      },
      list: [],
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    toWorks(row) {
      this.$router.push({
        path: '/video/video/videoWorks',
        query: {
          business: JSON.stringify(row)
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否删除此做品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        customerDeleteById({
          id: row.id
        }).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleBlackAdd(row) {
      this.$confirm(`是否将 ${row.businessName} 加入黑名单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        worksBlacklistAdd({
          'businessId': row.businessId,
          'businessName': row.businessName,
          'userId': this.$store.getters.userId,
          'userName': this.$store.getters.userName
        }).then(res => {
          this.$message.success('添加成功')
          this.getList()
        })
      }).catch(() => {
      })
    },
    getList() {
      pageWorksCountList(this.queryList).then(res => {
        const { total, records } = res.data
        this.list = records
        this.total = total
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.content {
  padding: 10px;
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    /deep/ .el-input {
      height: 100%;
    }
    /deep/ .el-input__inner {
      width: 200px;
      margin: 0 5px;
    }
  }
}
</style>
